<!-- <script>
//setup
// 1.执行时机，比beforeCreate还要早
// 2.setup函数中，获取不到this（this是undefined）
// 3.数据和函数，需要在setup最后retrun，才能模板中应用
export default {
  setup () {
    console.log('setup函数')
  },
  beforeCreate () {
    console.log('beforeCreate函数')
  }
}
</script> -->

<!-- <script setup>
const message = 'this is a message'
const logMessage = () => {
  console.log(message)
}
</script> -->

<!-- <script setup>
// 1.reactive:接收一个对象类型的数据，返回一个响应式的对象
import { reactive } from 'vue'
const state = reactive({
  count: 100
})
const setCount = () => {
  state.count++
}
</script> -->

<script>
// 2.ref:接收简单类型或复杂类型，返回一个响应式的对象
// 原理：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型 
// 底层：包成复杂类型之后，再借助reactive实现的响应式
// 注意点：
// 1.访问数据，需要通过.value
// 2.在tempalte中，.value不需要加（帮我们扒了一层）

// 推荐：以后声明数据，统一用ref => 统一了编码规范
import { ref } from 'vue'
const count = ref(0)
const setCount = () => {
  count.value++
}
</script>

<template>
  <!-- <div>{{message}}</div>
  <button @click="logMessage">按钮</button> --> 
  <div>
    <!-- <div>{{ state.count }}</div>
    <button @click="setCount">+1</button> -->
    <div>{{ count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>
